<template>
	<view>
		<view class="mapView">
			<map id='mapId' :scale="scale" :longitude="qdInfo.longitude" :latitude="qdInfo.latitude" :polyline='polyline'
				:markers="markers" :show-location='true' />
		</view>

		<cover-view class=" fixed-bottom" style="margin-bottom: 60rpx;">
			<cover-view class="flex-row-flex-end">
				<cover-view @click="dingwei()" class="dingwei flex-row-center">
					<cover-image class="image7" src="/static/index/7.png" mode=""></cover-image>
				</cover-view>
			</cover-view>

			<cover-view v-if="type==0" class="bottomView">
				<cover-view class="flex-row-space-between">
					<cover-view class="title">
						Hi，您好！
					</cover-view>
				<cover-view class="flex-row-flex-end">
						<cover-image class="image1" src="/static/index/1.png" mode=""></cover-image>
						<!-- @click="show=true" -->
						<!-- <cover-view class="num flex-row-center">
							<cover-view class="baseColor" style="margin-right: 6rpx;">{{driver_number}}</cover-view>
							<cover-view>名司机</cover-view>
						</cover-view> -->
					</cover-view>
				</cover-view>
				<cover-view @click="descriptionClick()" class="flex-row-center" style="margin: 70rpx 0;margin-bottom: 6rpx;">
					<cover-view class="money">
						预计{{estimate_price}}元
					</cover-view>
				</cover-view>
				
				
				<cover-view  @click="descriptionClick()" class="flex-row-center" style="margin-bottom: 70rpx;">
					<cover-view v-if='Number(zdInfo.longitude)' class="money1">
						预计时间:{{path.estimate_duration}}分钟 
					</cover-view>
					<cover-view v-if='Number(zdInfo.longitude)' class="money2">
						预计距离:{{path.total_km}}km
					</cover-view>
				</cover-view>
				
				<cover-view class="flex-row-space-between">
					<cover-view @click="passengerInfoClick()" class="button flex-row-center">
						帮朋友叫
					</cover-view>
					<cover-view @click="orderDetailClick()" class="button1 flex-row-center">
						呼叫司机
					</cover-view>
				</cover-view>

			</cover-view>
			
			<cover-view v-if="type==1||type==2||type==3||type==4||type==5||type==6" class="bottomView">
				<cover-view class="flex-row-space-between">
					<cover-view class="">
						<cover-view class="type1Title">
							<cover-view v-if="type==1">正在全力呼叫司机</cover-view>
							<cover-view v-if="type==2">订单取消成功</cover-view>
							<cover-view v-if="type==3">司机师傅正在赶来</cover-view>
							<cover-view v-if="type==4">正在前往目的地</cover-view>
							<cover-view v-if="type==5">订单已完成</cover-view>
							<cover-view v-if="type==6">订单待支付</cover-view>
						</cover-view>
						<cover-view class="type1Title1">

							<cover-view v-if="type==1">正在努力寻找距离最近的司机，请耐心等待。</cover-view>
							<cover-view v-if="type==2">你可以重新呼叫司机</cover-view>
							<cover-view v-if="type==3">司机师傅正在努力赶往上车点，请耐心等待。</cover-view>
							<!-- 距离目的地还有1.9km -->
							<cover-view v-if="type==4">正在前往目的地</cover-view>
							<cover-view v-if="type==5">司机已将您安全送达</cover-view>
							<cover-view v-if="type==6">订单待支付</cover-view>
						</cover-view>
					</cover-view>
					<cover-image v-if='type==1' class="image8" src="/static/index/8.gif" mode=""></cover-image>
				</cover-view>
				<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
					<cover-view class="flex-row-flex-start flex1">
						<cover-view class="circle1 ">

						</cover-view>
						<cover-view class="type1Title2 ">
							{{data.start_address}}
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
					<cover-view class="flex-row-flex-start flex1">
						<cover-view class="circle ">
						
						</cover-view>
						<cover-view class="type1Title2 ">
						{{data.end_address||'待定'}}
						</cover-view>
					</cover-view>
				</cover-view>
				
				
			<!-- 	<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
					<cover-view class="flex-row-flex-start ">
						<cover-view class="circle ">

						</cover-view>
						<cover-view class="type1Title2 ">
							{{data.end_address||'待定'}}
							
						</cover-view>
					</cover-view>
					
				</cover-view> -->
				<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
							<!-- // 状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消 -->
					<cover-view v-if='Number(zdInfo.longitude)&&(Number(data.order_status)==10||Number(data.order_status)==20||Number(data.order_status)==30||Number(data.order_status)==40)' class="type1Title2 ">
						预估价格:{{data.estimated_amount}}元  预估距离:{{data.planning_route.distance}}km  
					</cover-view>
					 <!-- 预估时间:{{data.planning_route.duration}}分钟 -->
		
				</cover-view>
				<cover-view v-if='Number(data.order_status)==50||Number(data.order_status)==60' class="type1Title2 ">
					实际价格:{{data.total_amount}}元   实际距离:{{data.total_mileage}}km  实际时间:{{data.real_time}}分钟  
				</cover-view>
			<!-- 	<cover-view v-if='Number(data.order_status)==50||Number(data.order_status)==60' class="type1Title2 ">
					围栏内费用:{{data.fence_within_fee}}元   围栏内里程:{{data.fence_mileage}}km  围栏外费用:{{data.fence_out_fee}}元   围栏外里程:{{data.fence_out_mileage}}km 超时时间:{{data.overtime_time}}  超时费用:{{data.overtime_fees}}元 等待时间:{{data.waiting_time|getFormatDuration}}   等待费用:{{data.waiting_expenses}}元
				</cover-view> -->
				
				<cover-view @click="cancelClick()" v-if='type==1' class="type1Button ">
					取消订单
				</cover-view>
				<cover-view @click="zailai()" v-if='type==2' class="type2Button ">
					再来一单
				</cover-view>


			</cover-view>
			<cover-view v-if="type==3||type==4||type==5||type==6" class="bottomView">
				<cover-view class="flex-row-space-between">
					<cover-view class="flex-row-flex-start">
						<cover-image class="headImage" :src="data.driver.avatar" mode=""></cover-image>
						<cover-view class="">
							<cover-view class="type3Name">
								{{data.driver.nick_name}}
							</cover-view>
							<cover-view class="type3No">
								编号{{data.driver.id}}
							</cover-view>
						</cover-view>
					</cover-view>
					<cover-image  @click="phoneClick(data.driver.mobile)" class="phone" src="/static/common/phone.png"></cover-image>
				
					</image>
				</cover-view>
				<cover-view class="flex-row-space-between" style="margin: 0  30rpx;">
					<cover-view v-for="(item,index) in operationList" :key="index">
						<cover-view @click="operationClick(item)" class="flex-column-center">
							<cover-image class="type3Icon" :src="item.icon" mode=""></cover-image>
							<!-- <image v-if="Number(item.value)==1" class="type3Icon" src="/static/index/11.png" mode=""></image> -->
						
							<cover-view class="type3Title">
								{{item.name}}
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
			<!-- 		<cover-view v-if="type==4" class="type4Button flex-row-center">
							确认到达目的地
						</cover-view> -->
			<cover-view @click="payClick()" v-if="type==6" class="type4Button flex-row-center">
				去支付
			</cover-view>
			<cover-view @click="zailai()" v-if="type==5" class="type4Button flex-row-center">
				再来一单
			</cover-view>

		</cover-view>
		<u-picker @cancel="modeCancel()" :show="show" :columns="columns" @confirm='click' keyName="label"></u-picker>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: 'JKYBZ-NQRW4-Y47U6-KLJJT-HLGYQ-B2B4O' // 必填
	});
import { VUE_APP_RESOURCES_URL } from '@/config'
	//引入uniImMethods
	// import uniIm from '@/uni_modules/uni-im/lib/main.js';
import {
		getServiceInfoByCity,
	} from '@/api/index.js'
	import {
		continuousOrder,
		placeOrder,
		planningRouter,
		countEstimatedPrice
	} from '@/api/index.js'
	import {
		getOrderDetail,
		getConfig
	} from '@/api/personalCenter.js'
	export default {
		components: {},
		computed: {

		},
		
		data() {
			return {

				operationList: [
					// {
					// 	icon: '/static/index/10.png',
					// 	name: '联系司机',
					// 	url: '/uni_modules/uni-im/pages/chat/chat?user_id=',
					// 	value:0,
					// },
					{
						icon: '/static/index/11.png',
						name: '紧急求助',
						url: '110',
						value:1,
					},
					{
						icon: '/static/index/12.png',
						name: '联系客服',
						value: '400-123-123',
						value:2,
					},
					{
						icon: '/static/index/13.png',
						name: '取消订单',
						url: 'info?type=1',
						value:3,
					}
				],
				scale: 13,
				includePoints: [{
						latitude: '',
						longitude: '',
					},
					{
						latitude: '',
						longitude: '',
					}
				],
				// {
				// 			latitude: '',
				// 			longitude: '',
				// 		},
				// 		{
				// 			latitude: '',
				// 			longitude: '',
				// 		}

				polyline: [{
					points: [],
					color: "#26D360",
					width: 12,
					arrowLine: true,
				}, ],


				markers: [

					{
						id: 0,
						latitude: '',
						longitude: '',

						iconPath: "/static/index/qd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: "起点",
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48

					},
					{
						id: 1,
						latitude: '',
						longitude: '',
					
						iconPath: "/static/index/zd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: '终点',
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48
					
					},
					{
						id: 2,
						latitude: '',
						longitude: '',
						iconPath: "/static/index/sj.png",
						width: 22,
						height: 22
					}
				],
				qdInfo: {
					latitude: '',
					longitude: '',
					address: '',
				},
				zdInfo: {
					latitude: '',
					longitude: '',
					address: '',
				},
				type: -1, //0 确认地址 1待接单 2已取消 3已接单 4进行中 5已完成
				show: false,
				columns: [
					['1名司机', '2名司机', '3名司机', '4名司机', '5名司机', '6名司机', '7名司机', '8名司机']
				],
				driver_number: 1,
				friendInfo: {},
				startPrice: {
					start_price: 0,
				},
				order_id: 0,
				data: {},
				path: {},
				estimate_price: 0,
				timer: 0,
				polylineType:0,
				config:{}
			}
		},
		filters: {
		getFormatDuration(duration) {
		        let time = parseInt(duration);
		        let minute = 0;// 分
		        let hour = 0;// 小时
		        let day = 0;// 天
		        if (time > 60) {
		            minute = parseInt(time / 60);
		            time = parseInt(time % 60);
		            if (minute > 60) {
		                hour = parseInt(minute / 60);
		                minute = parseInt(minute % 60);
		                if (hour > 24) {
		                    day = parseInt(hour / 24);
		                    hour = parseInt(hour % 24);
		                }
		            }
		        }
		        let result = '';
		        if (time > 0) {
		            result = "" + parseInt(time) + "秒";
		        }
			if (minute > 0) {
			            result = "" + parseInt(minute) + "分" + result;
			        }
			        if (hour > 0) {
			            result = "" + parseInt(hour) + "小时" + result;
			        }
			        if (day > 0) {
			            result = "" + parseInt(day) + "天" + result;
			        }
			        return result;
			    },
		
		},
	
		onShow() {
			if (this.order_id) {

				this.getOrderDetail(1)
				this.timerData()

			}

		},
		onHide() {
			console.log('onHide')
			clearInterval(this.timer)
			this.timer = null
		},
		onUnload() {
			console.log('onUnload')
			clearInterval(this.timer)
			this.timer = null
		},
		onLoad(e) {
			if (e.order_id) {
				this.polylineType=1
				this.order_id = e.order_id
				this.config = uni.getStorageSync('config')
				// this.operationList[1].url=this.config.client_service_mobile		
				
				this.getConfig()
			} else {
				this.type = 0
				this.qdInfo = uni.getStorageSync('qdInfo')
				this.zdInfo = uni.getStorageSync('zdInfo')
				this.driver_number = uni.getStorageSync('driver_number')
				this.startPrice = uni.getStorageSync('startPrice')
				this.friendInfo = uni.getStorageSync('friendInfo')

				this.markers[0].latitude = this.qdInfo.latitude
				this.markers[0].longitude = this.qdInfo.longitude
				this.markers[0].callout.content = this.qdInfo.address






				if (Number(this.zdInfo.longitude)) {
					this.markers[1].latitude = this.zdInfo.latitude
					this.markers[1].longitude = this.zdInfo.longitude
					this.markers[1].callout.content = this.zdInfo.address,
					// this.polyline = [{
					// 	points: [],
					// 	color: "#26D360",
					// 	width: 12,
					// 	arrowLine: true,
					// }, ]
					// var marker = {
					// 	id: 1,
					// 	latitude: this.zdInfo.latitude,
					// 	longitude: this.zdInfo.longitude,

					// 	iconPath: "/static/index/zd.png",
					// 	callout: {
					// 		fontSize: 12,
					// 		color: '#333333',
					// 		content: this.zdInfo.address,
					// 		bgColor: "#ffffff",
					// 		display: "ALWAYS",
					// 		padding: 8,
					// 		borderRadius: 14
					// 	},
					// 	width: 24,
					// 	height: 48

					// }
					// this.markers.push(marker)
					this.planningRouter(this.qdInfo.longitude + ',' + this.qdInfo.latitude, this.zdInfo.longitude + ',' +
						this.zdInfo.latitude)
				}



			}
			this.getServiceInfoByCity()
			this.setNavTitle()

		},

		methods: {
			
			dingwei(){
				console.log('dingwei')
				 let mapObjs = uni.createMapContext('mapId', this)
				            mapObjs.moveToLocation({ latitude: this.qdInfo.latitude,
				longitude: this.qdInfo.longitude },
				            {
				                complete: res=>{
				                }
				            })
			},
			
			getServiceInfoByCity(){
				getServiceInfoByCity({
					city:uni.getStorageSync('ylCity')
				}).then(res => {
				
					this.operationList[1].url=res.data.service_mobile
				
					})
			},
			getConfig(){
				
				// getConfig().then(res => {
				// 	this.config=res.data
				// 	uni.setStorageSync('config', this.config)
				// 	this.operationList[1].url=this.config.client_service_mobile
				
				// 	})
			},
			//5秒调一次接口
			timerData() {
				var that = this
				clearInterval(this.timer)
				this.timer = null
				that.timer = setInterval(() => {

					that.getOrderDetail(1)
				}, 5000)
			},
			//打电话
			phoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			//获取起步价 规划路线
			planningRouter(start_point, end_point) {
				var that = this
				var data = {
					is_in_polygon:this.startPrice.is_in_polygon,
					start_price: this.startPrice.start_price,
					is_day: this.startPrice.is_day,
					city: this.qdInfo.city,
					start_point: start_point,
					end_point: end_point
				}
				planningRouter(data)
					.then(res => {
						that.path = res.data
						that.estimate_price = res.data.estimate_price
												
						that.pathPlanning()
						// if (!this.type) {
							
						// }

					})
			},
			//获取规划路线
			pathPlanning() {
				var list = []
				var list1 = []

				this.path.paths[0].steps.forEach(item2 => {
					let polylineList1 = item2.polyline.split(";");
					polylineList1.forEach((item4, index) => {
						let polylineList = item4.split(",");
						polylineList.forEach((item3, index) => {
							if (index % 2) {
								list.push(item3)

							} else {
								list1.push(item3)
							}
						})
					})

				})


				for (var i = 0; i < list.length; i++) {
					var item = {
						latitude: list[i],
						longitude: list1[i],
					}
					this.polyline[0].points.push(item)
				}
			},
			// //获取预估金额
			// countEstimatedPrice() {
			// 	var that = this
			// 	var data = {
			// 		mileage: this.path.total_km,
			// 		city: this.qdInfo.city,
			// 		start_price: this.startPrice.start_price,
			// 		is_day: this.startPrice.is_day
			// 	}
			// 	countEstimatedPrice(data)
			// 		.then(res => {
			// 			that.estimate_price = res.data.estimate_price
			// 		})
			// },
			zailai() {
				uni.navigateTo({
					url: 'index'
				})
			},
			operationClick(item) {
				if (item.name == '取消订单') {
					this.cancelClick()
					return
				}
				if (item.name == '投诉反馈') {
					this.yijian()
					return
				}
				if (item.name == '紧急求助'||item.name == '联系客服') {
					this.phoneClick(item.url)
					return
				}
				
				if (item.name == '联系司机') {
					this.goChart()
					return
				}
			},
			payClick() {
				uni.navigateTo({
					url: 'pay?order_id=' + this.order_id
				})
			},
			yijian() {
				uni.navigateTo({
					url: '../personalCenter/feedback?order_id=' + this.order_id
				})
			},
			goChart() {
				console.log('goChart', this.data.sj_uid);
				uni.navigateTo({
					url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + this.data.sj_uid
					// url: '/uni_modules/uni-im/pages/userList/userList'
				})
			},
			dataDispose(type) {
				//type==1 是二次刷新
				var that = this
				var starting_point = that.data.starting_point.split(',')
				var end_point = that.data.end_point.split(',')
				that.qdInfo.latitude = starting_point[1],
					that.qdInfo.longitude = starting_point[0],
					that.zdInfo.latitude = end_point[1],
					that.zdInfo.longitude = end_point[0],
					that.qdInfo.address = that.data.start_address
				that.zdInfo.address = that.data.end_address
				that.markers[0].latitude = that.qdInfo.latitude
				that.markers[0].longitude = that.qdInfo.longitude
				that.markers[0].callout.content = that.qdInfo.address
				if (Number(that.zdInfo.longitude)) {
					that.markers[1].latitude = that.zdInfo.latitude
					that.markers[1].longitude = that.zdInfo.longitude
					that.markers[1].callout.content = that.zdInfo.address
					// var marker = {
					// 	id: 1,
					// 	latitude: this.zdInfo.latitude,
					// 	longitude: this.zdInfo.longitude,

					// 	iconPath: "/static/index/zd.png",
					// 	callout: {
					// 		fontSize: 12,
					// 		color: '#333333',
					// 		content: this.zdInfo.address,
					// 		bgColor: "#ffffff",
					// 		display: "ALWAYS",
					// 		padding: 8,
					// 		borderRadius: 14
					// 	},
					// 	width: 24,
					// 	height: 48

					// }
					// var isMarker1 = false
					// that.markers.forEach(item => {
					// 	console.log(item.id == 1)
					// 	if (item.id == 1) {
					// 		isMarker1 == true
					// 	}
					// })
					// if (!isMarker1) {
					// 	that.markers.push(marker)
					// } else {
					// 	that.markers[1].latitude = that.data.driver.lat
					// 	that.markers[1].longitude = that.data.driver.lng
					// }
					// console.log(that.markers)


				}

				var order_status = Number(that.data.order_status)


// 状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消
//order_status == 50 ||
				if ( order_status == 60 || order_status == 70) {

					clearInterval(that.timer)
					that.timer = null
				}
				if (order_status == 50 || order_status == 60) {
					that.polyline=[{
						points: [],
						color: "#26D360",
						width: 12,
						arrowLine: true,
					}, ]
					if (!that.polyline[0].points.length) {
						//实际路线
						that.actualPath()
					}





				} else {
					if (Number(that.zdInfo.longitude)) {
						if(!that.polylineType){
							that.polyline=[{
								points: [],
								color: "#26D360",
								width: 12,
								arrowLine: true,
							}, ]
							that.planning_route()
							that.polylineType=1
						}else{
							if (!that.polyline[0].points.length) {
								//规划路线
								// that.planningRouter(that.data.starting_point, that.data.end_point)
								that.planning_route()
							}
						}
					

					}


				}

				if (order_status == 20 || order_status == 30 || order_status == 40) {
				that.markers[2].latitude = that.data.driver.lat
				that.markers[2].longitude = that.data.driver.lng
					// var marker2 = {
					// 	id: 2,
					// 	latitude: that.data.driver.lat,
					// 	longitude: that.data.driver.lng,
					// 	iconPath: "/static/index/sj.png",
					// 	width: 22,
					// 	height: 22
					// }
					// var isMarker2 = false
					// that.markers.forEach(item => {
					// 	if (item.id == 2) {
					// 		isMarker2 == true
					// 	}
					// })
					// if (!isMarker2) {
					// 	that.markers.push(marker2)
					// } else {
					// 	if (Number(that.zdInfo.longitude)) {
					// 		that.markers[2].latitude = that.data.driver.lat
					// 		that.markers[2].longitude = that.data.driver.lng
					// 	} else {
					// 		that.markers[1].latitude = that.data.driver.lat
					// 		that.markers[1].longitude = that.data.driver.lng
					// 	}

					// }
					console.log(that.markers)




				}
				that.set()
			},
			//获取订单详情
			getOrderDetail(type) {

				var that = this
				var data = {
					order_id: this.order_id
				}
				getOrderDetail(data)
					.then(res => {
						that.data = res.data
						//数据处理
						that.dataDispose(type)
					})
			},
			planning_route(){
				var that = this
				var list1=[]
				for (var i = 0; i < that.data.planning_route.trace.length; i++) {
					var list = that.data.planning_route.trace[i].split(',')
					var item = {
						latitude: list[1],
						longitude: list[0],
					}
					list1.push(item)
					// that.polyline[0].points.push(item)
				}
				that.polyline[0].points=list1
			},
			
			//获取实际路线
			actualPath() {
				var that = this
				for (var i = 0; i < that.data.trace.length; i++) {
					var list = that.data.trace[i].location.split(',')
					var item = {
						latitude: list[1],
						longitude: list[0],
					}
					that.polyline[0].points.push(item)
				}
			},
			set() {
				// 1待接单 2已取消 3已接单 4进行中 5已完成
				var order_status = Number(this.data.order_status)
				// 状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消
				if (order_status == 10) {
					this.type = 1
				}

				if (order_status == 70) {
					this.type = 2
				}
				if (order_status == 20 || order_status == 30) {
					this.type = 3

				}
				if (order_status == 40) {
					this.type = 4

				}
				if (order_status == 50) {
					this.type = 6

				}
				if (order_status == 60) {
					this.type = 5

				}
				this.setNavTitle()
			},
			//下单
			placeOrder() {
				uni.showLoading({
					mask:true
				})
				var that = this
				var data = {
					estimated_amount:this.estimate_price,
					starting_point: this.qdInfo.longitude + ',' + this.qdInfo.latitude,
					starting_price: this.startPrice.start_price,
					is_fence_out: this.startPrice.is_in_polygon,
					city: this.qdInfo.city,
					is_day: this.startPrice.is_day,
					driver_number: this.driver_number,
					is_help_friend: 0,
					end_point: this.zdInfo.longitude + ',' + this.zdInfo.latitude,
					start_address: this.qdInfo.address,
					end_address: this.zdInfo.address,
				}
				if (this.friendInfo.friend_name.length) {
					data.is_help_friend = 1
					data.friend_name = this.friendInfo.friend_name
					data.friend_mobile = this.friendInfo.friend_mobile
					data.who_pay = this.friendInfo.who_pay
				}
				placeOrder(data)
					.then(res => {
						uni.hideLoading()
						if (Number(this.driver_number) == 1) {
							that.order_id = res.data.order_id

							that.getOrderDetail(1)
							that.timerData()
						} else {
							uni.redirectTo({
								url: '/pages/personalCenter/order'
							});
						}

						// this.type = 1
						// this.setNavTitle()
					})
					.catch(err=>{
					       // uni.hideLoading()
					      })
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			setNavTitle() {
				if (this.type == 1) {
					uni.setNavigationBarTitle({
						title: '正在呼叫'
					})
				}
				if (this.type == 2) {
					uni.setNavigationBarTitle({
						title: '订单已取消'
					})
				}
				if (this.type == 3) {
					uni.setNavigationBarTitle({
						title: '订单已接单'
					})
				}
				if (this.type == 4) {
					uni.setNavigationBarTitle({
						title: '订单进行中'
					})
					this.operationList[2].icon = '/static/index/14.png'
					this.operationList[2].name = '投诉反馈'
					this.operationList[2].value=4
					
				}
				if (this.type == 6) {
					uni.setNavigationBarTitle({
						title: '订单待支付'
					})
					this.operationList[2].icon = '/static/index/14.png'
					this.operationList[2].name = '投诉反馈'
					this.operationList[2].value=4

				}
				if (this.type == 5) {
					uni.setNavigationBarTitle({
						title: '订单已完成'
					})
					this.operationList[2].icon = '../../static/index/14.png'
					this.operationList[2].name = '投诉反馈'
					this.operationList[2].value=4
				}
			},
			//帮朋友呼叫
			passengerInfoClick() {
				uni.navigateTo({
					url: 'passengerInfo'
				})
			},
			//取消订单
			cancelClick() {
				uni.navigateTo({
					url: 'cancelOrder?order_id=' + this.order_id
				})
			},
			//呼叫司机点击
			orderDetailClick() {

				this.placeOrder()

				// uni.navigateTo({
				// 	url:'orderDetail'
				// })
			},
			click(e) {
				console.log(e);
				// this.city = e.value[0]
				this.num = e.indexs[0] + 1
				this.show = false
			},
			modeCancel() {
				this.show = false
			},
			descriptionClick() {
				uni.navigateTo({
					url: 'description'
				})
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.mapView {
		width: 750rpx;
		height: 100vh;

		map {
			width: 100%;
			height: 100%;
		}
	}

	.bottomView {
		margin: 30rpx 38rpx;
		margin-bottom: 0;
		padding: 30rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 16rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.image1 {
		margin-right: 6rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.num {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #3D3D3D;
	}

	.image2 {
		margin-left: 6rpx;
		width: 12rpx;
		height: 12rpx;
	}

	.money {
		width: 600rpx;
		text-align: center;
		// white-space:pre-wrap;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.money1 {
		width: 400rpx;
		text-align: right;
		// white-space:pre-wrap;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.money2 {
		margin-left: 8rpx;
		width: 400rpx;
		text-align: left;
		// white-space:pre-wrap;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.image3 {
		margin-left: 8rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.button {
		text-align: center;
		width: 300rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 38rpx;
		opacity: 1;
		border: 2rpx solid $base-color;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		// font-weight: 500;
		color: $base-color;
	}

	.button1 {
		text-align: center;
		width: 300rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: $base-color;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		// font-weight: 500;
		color: #FFFFFF;
	}

	.dingwei {
		margin-right: 30rpx;
		width: 76rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 50%;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		opacity: 1;
	}

	.image7 {
		width: 36rpx;
		height: 36rpx;
	}


	.type1Title {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type1Title1 {
		margin-top: 6rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.image8 {
		width: 48rpx;
		height: 48rpx;
		animation: rotate 2s infinite linear;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.circle {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: #FF9500;
		opacity: 1;
		border-radius: 50%;
	}

	.circle1 {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: $base-color;
		opacity: 1;
		border-radius: 50%;
	}

	.type1Title2 {
		width: 100%;
		white-space:pre-wrap;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.type1Title3 {
		text-align: end;
		width: 120rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: $base-color;
	}

	.type1Title4 {
		text-align: end;
		width: 120rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.type1Button {
		margin: 60rpx 0;
		margin-bottom: 0;
		height: 90rpx;

		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		opacity: 1;
		border: 2rpx solid #EEEEEE;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type2Button {
		margin: 60rpx 0;
		margin-bottom: 0;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		opacity: 1;
		background: $base-color;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.headImage {
		margin-right: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.type3Name {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type3No {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.type3Icon {
		margin-top: 50rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.type3Title {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.type4Button {
		margin: 30rpx;
		margin-bottom: 0;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background: #26D360;
		border-radius: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
